<template>
    <LeftRightLayoutContainer type="left">
        <template #default>
            <div class="panel-big-title">气</div>
            <div class="flex-container" style="height: 248px; margin-bottom: 16px">
                <GasInfo />
                <GasEarlyWarningControl />
                <BlueSkyProtection />
            </div>
            <div class="panel-big-title">水</div>
            <div class="flex-container" style="height: 248px; margin-bottom: 16px">
                <WaterInfo />
                <WaterEarlyWarningControl />
                <BlueWaterProtection />
            </div>
            <div class="flex-container">
                <SoilInfo />
                <SolidInfo />
                <RadiationInfo />
                <SoundInfo />
            </div>
        </template>
    </LeftRightLayoutContainer>
</template>

<script setup lang="ts">
import GasInfo from './panel/GasInfo.vue'
import GasEarlyWarningControl from './panel/GasEarlyWarningControl.vue'
import BlueSkyProtection from './panel/BlueSkyProtection.vue'
import WaterInfo from './panel/WaterInfo.vue'
import WaterEarlyWarningControl from './panel/WaterEarlyWarningControl.vue'
import BlueWaterProtection from './panel/BlueWaterProtection.vue'
import SoilInfo from './panel/SoilInfo.vue'
import SolidInfo from './panel/SolidInfo.vue'
import RadiationInfo from './panel/RadiationInfo.vue'
import SoundInfo from './panel/SoundInfo.vue'
import LeftRightLayoutContainer from '@/components/LeftRightLayoutContainer/index.vue'
</script>

<style lang="scss" scoped>
.flex-container {
    display: flex;
    justify-content: space-between;
}
</style>
